import * as THREE from 'three'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight)
camera.position.set(2,2,2)
scene.add(camera)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const light = new THREE.AmbientLight()
scene.add(light)

const loader = new GLTFLoader()

let mixer: THREE.AnimationMixer | null = null

loader.load('/Fox.glb', (gltf) => {
  gltf.scene.scale.set(0.02, 0.02, 0.02)
  mixer = new THREE.AnimationMixer(gltf.scene)
  const actions = mixer.clipAction(gltf.animations[2])
  actions.play()
  scene.add(gltf.scene)
})

const clock = new THREE.Clock()

const tick = () => {
  const delta = clock.getDelta()
  controls.update()
  if(mixer !== null) {
    mixer.update(delta)
  }
  renderer.render(scene, camera)
  window.requestAnimationFrame(tick)
}

tick()
